<%@ page language="java" 
	contentType="text/html; 
	charset=UTF-8"
	pageEncoding="UTF-8"
	import="connectMysql.TestConnect"
	%>
<!DOCTYPE html>
<html>
<head>
	<title>作业管理系统</title>
	<meta charset="UTF-8">
	<style>
		body {
			background-image: url(img1.jpg);
			background-repeat:no-repeat ;
			background-size:100% 100%;
			background-attachment: fixed;
		}
		.center {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}
		.select-box-container {
	      display: none;
	      position: absolute;
	      top: calc(50% + 70px);
	      left: calc(50% -100px);
	      text-align: center;
	    }
	    .select-box {
	    	text-align: center;
		      width: 200px;
		      font-size: 10px;
			  padding: 10px;
			  border-radius: 5px;
	    }
        .button {
            margin-right: 10px;
            margin-left: 10px;
            height: 100px;
            width: 200px;
            font-size: 24px;
            font-weight: bold;
            border-radius: 10px;
            background-color: #4CAF50; /* Green */
            color: white;
        }
        input[type="submit"],input[type="button"] {
			text-align: center;
			background-color: #4CAF50;
			color: #fff;
			padding: 10px 20px;
			border-radius: 5px;
			border: none;
			cursor: pointer;
		}
		input[type="submit"]:hover ,input[type="button"]:hover{
			background-color: #3e8e41;
		}
		.return_button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
	</style>
</head>
<body>
	<%
    	String userid=request.getParameter("id");
		String[] class_name=connectMysql.TestConnect.get_all_class_name(userid);
    %>
    <script >
	var list = [];
	  <% for (int i = 0; i < class_name.length; i++) { %>
	    list.push("<%= class_name[i] %>");
	  <% } %>
	</script>
	<div style="position:absolute; top:0; left:60;">
		<h1 id="user_id">工号:<%=userid %></h1>
	</div>
	
	<div class="center">
		<button class="button" onclick="classinit()">创建班级</button>
        <button class="button" onclick="showSelectBox()">我的课程</button>
        <button class="button" onclick="location.href='inform.jsp'">我的通知</button>
        
		<div class="select-box-container" id="selectBoxContainer">
	      <select class="select-box" id="selectBox" size="5" style="overflow-y: scroll;">
	      	<option value="">课程列表:</option>
	      </select>
	    </div>
	    
        <form>
        	<div style="position:absolute; top:0; right:0;">
			    <input type="text" id="code" placeholder="邀请码" style="height:30px; width:200px;" required>
			    <input type="button"  onclick="insert_class()" value="加入班级" />
			</div>
        </form>
    </div>
    <button class="return_button" onclick="back()">退出</button>
    
	<script>
		
		function back(){
			window.location="login.jsp";
		}
		function insert_class(){
			var codeInput = document.getElementById("code");
		    var codeValue = codeInput.value;
			window.location = "insert.jsp?id=<%=userid%>&code="+codeValue;
		}
		function classinit(){
			window.location = "class_init.jsp?id=<%=userid%>";
		}
		
		
	    function showSelectBox() {
	      var selectBoxContainer = document.getElementById("selectBoxContainer");
	      var selectBox = document.getElementById("selectBox");
	      if (selectBoxContainer.style.display === "none") {
	        selectBoxContainer.style.display = "block";
	        selectBox.innerHTML = "";

	        for (var i = 0; i < list.length; i++) {
	          var option = document.createElement("option");
	          option.text = list[i];
	          selectBox.add(option);
	        }
	        selectBox.style.top = (event.clientY + 20) + "px";
	        selectBox.style.left = (event.clientX - 50) + "px";
	      } else {
	        selectBoxContainer.style.display = "none";
	      }
	     
	      selectBox.addEventListener("change", function() {
			    var selectedOption = selectBox.value;
			    for(var i=0;i<list.length;i++){
			    	if(selectedOption === list[i]){
			    		window.location.href = "my_class.jsp?id=<%=userid%>&classname="+list[i];
			    	}
			    }
			  });
	    }
  </script>
</body>
</html>